<template>
  <div class="container">
    <!-- 首页访问量统计 -->
    <template>
      <div class="common">
        <span class="title">首页访问量统计</span>
        <span>
          <el-select v-model="dateViewCheckedValue" placeholder="请选择" style="margin-right: 10px; margin-bottom: 10px;" @change="dateViewChange">
            <el-option v-for="item in dateViewOptions" :key="'dateView_' + item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-date-picker v-if="dateViewCheckedValue === '1'" v-model="dateViewYear" type="year" placeholder="请选择年度" @change="getDateViewList()" />
          <el-date-picker v-if="dateViewCheckedValue === '2'" v-model="dateViewMonth" type="month" placeholder="请选择月份" @change="getDateViewList()" />
          <el-date-picker v-if="dateViewCheckedValue === '3'" v-model="dateViewDay" type="date" placeholder="请选择日期" @change="getDateViewList()" />
        </span>
      </div>
      <div id="dateViewChart" class="my_chart" />
    </template>
    <!-- 栏目访问量统计 -->
    <template>
      <div class="common">
        <span class="title">栏目访问量统计</span>
        <span>
          <el-select v-model="columnViewTypeCheckedValue" placeholder="请选择" style="margin-right: 10px; margin-bottom: 10px;" @change="getColumnViewList()">
            <el-option v-for="item in columnViewTypeOptions" :key="'columnViewType_' + item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="columnViewCheckedValue" placeholder="请选择" style="margin-right: 10px;" @change="columnViewChange">
            <el-option v-for="item in columnViewOptions" :key="'columnView_' + item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-date-picker v-if="columnViewCheckedValue === '1'" v-model="columnViewYear" type="year" placeholder="请选择年度" @change="getColumnViewList()" />
          <el-date-picker v-if="columnViewCheckedValue === '2'" v-model="columnViewMonth" type="month" placeholder="请选择月份" @change="getColumnViewList()" />
          <el-date-picker v-if="columnViewCheckedValue === '3'" v-model="columnViewDay" type="date" placeholder="请选择日期" @change="getColumnViewList()" />
        </span>
      </div>
      <div id="columnViewChart" class="my_chart" />
    </template>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'StatisticIndex',
  data() {
    return {
      dateViewCheckedValue: '',
      dateViewOptions: [
        { label: '按年度', value: '' },
        { label: '按月', value: '1' },
        { label: '按日', value: '2' },
        { label: '按小时', value: '3' }
      ],
      dateViewYear: '',
      dateViewMonth: '',
      dateViewDay: '',
      dateViewChart: null,
      dateViewChartOption: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            // 折线点显示数据
            label: {
              show: true,
              position: 'top',
              color: 'black',
              fontSize: 12
            }
          }
        ]
      },
      columnViewCheckedValue: '',
      columnViewOptions: [
        { label: '按年度', value: '' },
        { label: '按月', value: '1' },
        { label: '按日', value: '2' },
        { label: '按小时', value: '3' }
      ],
      columnViewTypeCheckedValue: '',
      columnViewTypeOptions: [],
      columnViewYear: '',
      columnViewMonth: '',
      columnViewDay: '',
      columnViewChart: null,
      columnViewChartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          selected: {}
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  mounted() {
    this.getInfoClassList()
    this.getDateViewList()
  },
  methods: {
    // 获取首页访问量统计
    getDateViewList() {
      this.dateViewChart = echarts.init(document.getElementById('dateViewChart'))
      let url = '/api/busCount/getIndexStatData'
      if (this.dateViewCheckedValue === '1') {
        const dateArr = this.handleDate(this.dateViewYear)
        url += `?year=${dateArr[0]}`
      }
      if (this.dateViewCheckedValue === '2') {
        const dateArr = this.handleDate(this.dateViewMonth)
        url += `?year=${dateArr[0]}&month=${dateArr[1]}`
      }
      if (this.dateViewCheckedValue === '3') {
        const dateArr = this.handleDate(this.dateViewDay)
        url += `?year=${dateArr[0]}&month=${dateArr[1]}&day=${dateArr[2]}`
      }
      this.$http
        .get(url)
        .then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            const result = response.data.result
            result.label = result.label.map(item => {
              if (this.dateViewCheckedValue === '1') {
                item += '月'
              } else if (this.dateViewCheckedValue === '2') {
                item += '日'
              } else if (this.dateViewCheckedValue === '3') {
                item += '时'
              } else {
                item += '年'
              }
              return item
            })
            this.dateViewChartOption.xAxis.data = result.label
            this.dateViewChartOption.series[0].data = result.value
            this.dateViewChart.setOption(this.dateViewChartOption)
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.btnLoading = false
        })
    },
    dateViewChange() {
      this.dateViewYear = ''
      this.dateViewMonth = ''
      this.dateViewDay = ''
      const dateNow = new Date()
      if (this.dateViewCheckedValue === '1') {
        this.dateViewYear = dateNow
      } else if (this.dateViewCheckedValue === '2') {
        this.dateViewMonth = dateNow
      } else if (this.dateViewCheckedValue === '3') {
        this.dateViewDay = dateNow
      }
      this.getDateViewList()
    },
    // 获取栏目访问量统计
    getColumnViewList() {
      this.columnViewChart = echarts.init(document.getElementById('columnViewChart'))
      let url = '/api/busCount/getPageStatData'
      if (this.columnViewCheckedValue === '1') {
        const dateArr = this.handleDate(this.columnViewYear)
        url += `?year=${dateArr[0]}`
      }
      if (this.columnViewCheckedValue === '2') {
        const dateArr = this.handleDate(this.columnViewMonth)
        url += `?year=${dateArr[0]}&month=${dateArr[1]}`
      }
      if (this.columnViewCheckedValue === '3') {
        const dateArr = this.handleDate(this.columnViewDay)
        url += `?year=${dateArr[0]}&month=${dateArr[1]}&day=${dateArr[2]}`
      }
      if (this.columnViewTypeCheckedValue) {
        if (url.includes('?')) {
          url += `&parentId=${this.columnViewTypeCheckedValue}`
        } else {
          url += `?parentId=${this.columnViewTypeCheckedValue}`
        }
      }
      this.$http
        .get(url)
        .then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            this.columnViewChartOption.series = []
            const result = response.data.result
            result.xAxisData = result.xAxisData.map(item => {
              if (this.columnViewCheckedValue === '1') {
                item += '月'
              } else if (this.columnViewCheckedValue === '2') {
                item += '日'
              } else if (this.columnViewCheckedValue === '3') {
                item += '时'
              } else {
                item += '年'
              }
              return item
            })
            this.columnViewChartOption.xAxis[0].data = result.xAxisData
            result.yAxisData.forEach(item => {
              this.columnViewChartOption.series.push({
                name: item.name,
                type: 'bar',
                emphasis: { focus: 'series' },
                data: item.data
              })
            })
            // const selected = {}
            // this.columnViewChartOption.series.forEach((item, index) => {
            //   selected[item.name] = index === 0
            // })
            // this.columnViewChartOption.legend.selected = selected
            this.columnViewChart.setOption(this.columnViewChartOption, true)
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.btnLoading = false
        })
    },
    columnViewChange() {
      this.columnViewYear = ''
      this.columnViewMonth = ''
      this.columnViewDay = ''
      const dateNow = new Date()
      if (this.columnViewCheckedValue === '1') {
        this.columnViewYear = dateNow
      } else if (this.columnViewCheckedValue === '2') {
        this.columnViewMonth = dateNow
      } else if (this.columnViewCheckedValue === '3') {
        this.columnViewDay = dateNow
      }
      this.getColumnViewList()
    },
    // 获取栏目列表
    getInfoClassList() {
      const para = {
        pageNum: 1,
        pageSize: 1000
      }
      this.$http
        .post('/api/busInfoClass/queryByPage', para)
        .then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            this.columnViewTypeOptions = [
              { label: '全部栏目', value: '' }
            ]
            const result = response.data.result.records.filter(item => item.parentId === 0)
            result.forEach(item => {
              this.columnViewTypeOptions.push({
                label: item.classname,
                value: item.id
              })
            })
            this.getColumnViewList()
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.btnLoading = false
        })
    },
    // 处理日期参数
    handleDate(date) {
      const fullDateArr = []
      fullDateArr.push(date.getFullYear())
      fullDateArr.push(date.getMonth() + 1)
      fullDateArr.push(date.getDate())
      return fullDateArr
    }
  }
}
</script>

<style scoped>
.container{
  padding: 20px;
}

.common{
  display: flex;
  justify-content: space-between;

  .title{
    font-weight: bolder;
  }
}

.my_chart{
  width: 100%;
  height: 40vh;
}
</style>
